<template>
    <el-dialog @close="closeDialog" title="添加二级科室" v-model="isShow" center width="500">
       <el-form :model="twoParams" ref="form" :rules="rules">
         <el-form-item label="当前科室名称" >
            <el-input disabled v-model="name.DepartName"></el-input>
         </el-form-item>
         <el-form-item label="二级科室名称" prop="tweName">
            <el-input  placeholder="请输入科室名称" v-model="twoParams.tweName"></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
        <el-button type="danger" @click="emits('update:modelValue',false)">取消</el-button>
        <el-button type="primary" @click="addDepart">添加</el-button>
        
       </template>
    </el-dialog>
</template>

<script setup>
import { ref , reactive , watch } from 'vue';
import {addTwoDepartMentAPI} from '@/api/departMent'
import { ElMessage } from 'element-plus';
defineOptions({
    name:'TwoDepartMent'
})

const prop = defineProps(["modelValue","twoDeparts","getDepartMentList"])
const emits = defineEmits(["update:modelValue"])
let isShow = ref(prop.modelValue)
let name = ref(prop.twoDeparts)
let twoParams = reactive({
    tweName:""
})
let form = ref(null)
let rules = reactive({
  tweName:[
    {required:true,message:"请输入二级科室名称",trigger:"blur"},
    {min:2,max:10,message:"长度在2到10个字符",trigger:"blur"}
  ]  
})

const closeDialog = ()=>{
    form.value.resetFields()
   emits('update:modelValue',false)
}
const addDepart = async ()=>{
    await form.value.validate()
    await addTwoDepartMentAPI(name.value._id,twoParams.tweName)
    ElMessage.success('添加成功')
    prop.getDepartMentList()
   emits('update:modelValue',false)
}
watch(()=>prop.modelValue,(newValue)=>{
    isShow.value = newValue
})
watch(()=>prop.twoDeparts,(newValue)=>{
  name.value = newValue  
})
</script>

<style lang="scss" scoped>

</style>